<template>
  <div>
    <p>欢饮光临_vue开发的收银系统_水果店</p>
    <div>
      <table>
        <tr>
          <h3>苹果10￥/斤，折扣 : 8 折</h3>
        </tr>
        <tr>
          <span>请输入您要买的斤数</span>
          <input type="text" v-model.number="count" />
        </tr>
        <tr>
          <button @click="Check">结账买单~</button>
        </tr>
        <tr>
          <p>结账单：总价：{{price=this.price}}￥元，折后价：{{sale=this.sale}}￥元，省了：{{conserve=this.conserve}}￥元</p>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      price: 0,
      sale: 0,
      conserve:0
    }
  },
  methods: {
    Check() {
      console.log(1);
      this.price = this.count * 10
      this.sale = this.price * 0.8
      this.conserve= this.price-this.sale
    }
  },
}
</script>

<style lang="scss" scoped></style>
